<template>
	<view class="tag-text-container">
		<view class="tag-item" v-for="(item, index) in dataList" :key="index">
			<text>{{data[item]}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			tags: {
				type: Array,
				default: () => ([])
			},
			data: {
				type: Object,
				default: () => ({})
			}
		},
		computed: {
			dataList() {
				return this.tags.filter(n => this.data[n]);
			}
		}
	}
</script>

<style scoped lang="scss">
	.tag-text-container {

		.tag-item {
			display: inline-block;
			margin-right: 12rpx;
			padding: 2rpx 12rpx;
			background-color: #f3f3f3;
			color: #666;
			font-size: 26rpx;
			border-radius: 3px;

			&:last-child {
				margin-right: 0;
			}
		}
	}
</style>